<template>
  <div class="content">
    <!--    <div style="font-size: 18px">-->
    <!--      inline-style-->
    <!--    </div>-->
    <div class="padding-12">
      <a-button @click="testTypeOf">
        打印类型判断
      </a-button>
      <a-button @click="testArrow">
        测试箭头函数
      </a-button>
      <a-button @click="testThis">
        测试this指向
      </a-button>
      <a-button @click="testRestParams('a','b','c','d','e')">
        测试函数传参
      </a-button>
      <a-button @click="clone">
        浅拷贝
      </a-button>
      <a-button @click="deepClone">
        深拷贝
      </a-button>
    </div>

    <div class="font-bold">数组操作</div>
    <div class="padding-12">
      <a-button @click="push">
        push
      </a-button>
      <a-button @click="unshift">
        unshift
      </a-button>
      <a-button @click="pop">
        pop
      </a-button>
      <a-button @click="shift">
        shift
      </a-button>
      <a-button @click="splice">
        splice
      </a-button>
    </div>
    <div class="arr-wrapper">
      <div
          v-for="(item,index) of arr"
          :key="index"
          class="arr-item"
      >
        {{ item }}
      </div>
    </div>

    <div class="font-bold">promise</div>
    <div class="padding-12">
      <a-button @click="testPromise">
        1秒后成功的promise
      </a-button>
      <a-button @click="testPromiseReject">
        1秒后失败的promise
      </a-button>
      <a-button @click="testPromiseError">
        立马报错的promise
      </a-button>
      <a-button @click="testPromiseFinally">
        promise的finally
      </a-button>
      <a-button @click="promiseAll">
        promiseAll
      </a-button>
      <a-button @click="testAsync">
        执行async函数
      </a-button>
      <a-button @click="testAwait">
        测试await关键字
      </a-button>
      <a-button @click="asyncApi">
        调用封装的接口
      </a-button>
    </div>


  </div>
</template>

<script>
import util from '../util/index';
import lodash from 'lodash';
import $api from '../api/index';
import 'ant-design-vue/dist/antd.css'

// import {months,User} from './data/exportNormal1'
import {months, User as User1, } from '../data/exportNormal2';
const user = new User1('张三');
console.log(months);
console.log(user);

import User from '../data/exportDefault'

console.log(new User('张三'))
export default {
  name: 'App',
  data() {
    return {
      age: 13,
      arr: [1, 2, 3, 4, 5],
    };
  },
  watch: {},
  mounted() {
    // console.log('other code1')
    // this.asyncApi();
    // console.log('other code2')
  },
  methods: {
    // 类型判断
    testTypeOf() {
      console.log('typeof {}: ', typeof {});
      console.log('typeof "test": ', typeof 'test');
      console.log('typeof  2: ', typeof 2);
      console.log('typeof  true: ', typeof true);
      console.log('===');
      console.log('"2" === 2:', '2' === 2);
      console.log('"" === false', '' === false);
      console.log('"" === 0', '' === 0);
      console.log('==');
      console.log('"2" == 2:', '2' == 2);
      console.log('"" == false', '' == false);
      console.log('"" == 0', '' == 0);
    },
    // 测试箭头函数
    testArrow() {
      util.getData(function (userName) {
        console.log('使用普通函数');
        console.log(userName);
        console.log(this);
        console.log(this?.age);
      });

      util.getData((userName) => {
        console.log('使用箭头函数');
        console.log(userName);
        console.log(this);
        console.log(this.age);
      });
      console.log('定时器回调');
      setTimeout(function () {
        console.log(this?.age);
      });

      setTimeout(() => {
        console.log(this.age);
      });
    },
    // 测试this
    testThis() {
      const person1 = {
        name: '李四',
        hello() {
          console.log('我是' + this.name);
          console.log('this:', this);
        },
      };
      person1.hello();
      console.log(this);
    },
    // 测试任意数量参数
    testRestParams(a, b, ...args) {
      console.log(a);
      console.log(b);
      console.log(args);
      console.log(...[1, 2, 3]);
      console.log([...[1, 2, 3], ...[4, 5, 6], ...'abc']);
    },
    // 浅拷贝
    clone() {
      let a = {name: '张三', age: 13, child: [{name: '张三三', }], };
      let b = Object.assign({}, a);
      console.log(a, b);
      console.log(a === b);
      console.log(a.child === b.child);
    },
    // 深拷贝
    deepClone() {
      let a = {name: '张三', age: 13, child: [{name: '张三三', }], };
      let b = lodash.cloneDeep(a);
      console.log(a, b);
      console.log(a === b);
      console.log(a.child === b.child);
    },
    push() {
      this.arr.push(0);
    },
    unshift() {
      this.arr.unshift(0);
    },
    pop() {
      this.arr.pop();
    },
    shift() {
      this.arr.shift();
    },
    splice() {
      this.arr.splice(1, 0, 0, 0, 0);
    },
    testPromise() {
      let promise = new Promise(function (resolve, reject) {
        // 初始化promise时，传入的函数，有两个参数，当任务成功时，执行第一个，失败时执行第二个
        // 设置一个1s后成功的任务
        setTimeout(
            () => {
              resolve('result');
            },
            1000);
      });
      console.log('其他代码1');
      promise.then(res => {
        console.log(res);
      });
      console.log('其他代码2');

    },
    testPromiseReject() {
      let promise = new Promise(function (resolve, reject) {
        // 初始化promise时，传入的函数，有两个参数，当任务成功时，执行第一个，失败时执行第二个
        // 设置一个1s后成功的任务
        setTimeout(
            () => {
              reject('err');
            },
            1000);
      });
      promise.then(res => {
        console.log('successful', res);
      })
          .catch(err => {
            console.log(err);
          });

    },
    testPromiseError() {
      let promise = new Promise(function (resolve, reject) {
        // 初始化promise时，传入的函数，有两个参数，当任务成功时，执行第一个，失败时执行第二个
        // 设置一个1s后成功的任务
        throw new Error('报错了');
        // let test = b.name.age
      });
      promise.then(res => {
        console.log('successful', res);
      })
          .catch(err => {
            console.log(err);
          });

    },
    testPromiseFinally() {
      let promise = new Promise(function (resolve, reject) {
        // 初始化promise时，传入的函数，有两个参数，当任务成功时，执行第一个，失败时执行第二个
        // 设置一个1s后成功的任务
        throw new Error('报错了');
        // let test = b.name.age
      });
      promise.then(res => {
        console.log('successful', res);
      })
          .catch(err => {
            console.log(err);
          })
          .finally(() => {
            console.log('finally');
          });

    },
    promiseAll() {
      let promise1 = new Promise(function (resolve, reject) {
        setTimeout(() => resolve('result1'), 1000);
      });
      let promise2 = new Promise(function (resolve, reject) {
        setTimeout(() => resolve('result2'), 2000);
      });

      let allPromise = Promise.all([promise1, promise2]);
      allPromise.then(allResult => {
        console.log('所有promise都成功了', allResult);
      });

    },
    testAsync(){
      const asyncValue = this.asyncFunction();
      console.log(asyncValue);
      asyncValue.then(res => {
        console.log(res);
      });
    },
    async asyncFunction(){
      return 1;
    },
    async testAwait(){
      const promise = new Promise((resolve => {
        setTimeout(() => resolve('result'), 1000);
      }));
      console.log('other code1');
      const res = await promise;
      console.log(res);
      console.log('other code2');
    },
    async asyncApi(){
      const users = await $api.queryData();
      const users2 = await $api.queryData2();
      console.log(users2);
      console.log(users);
      console.log(users.result.map(item => item.name));
    },
  },
};
</script>

<style lang="less" scoped>

.content{
  >* {
    margin: 0 0 12px 12px;
  }

  .font-bold{
    font-weight: bold;
  }

  .arr-wrapper {
    display: flex;
    font-size: 16px;

    .arr-item {
      padding: 12px;
    }
  }

  .padding-12 {
    > * {
      margin: 12px 6px 0;
    }
  }


}
</style>
